<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
    <div id='app'>
        {{msg}}
        <ul>
            <li v-for="(item,index) in pro" :key="item.id">
                <input type="checkbox" v-model="item.chk">
                <span>品牌：{{item.proName}}</span>
                <span>单价：{{item.price}}元</span>
                <button @click="add(index)">+</button>
                <input type="text" v-model.lazy="item.num" :style="sty">
                <button @click="reduce(index)">-</button>
                <span>件数：{{item.num}}件</span>
            </li>
        </ul>
        <p>总价：{{aa}}元</p>
    </div>
    <!-- 本次针对day01里的购物车代码进行了优化，主要实现了针对数量进行实时监听，修改如下：
        1.去掉了原有加在checkbox复选框上的change事件，因为将aa替换到computed中后也会判断chk的值，故不影响原有的功能
        2.将原有change事件的函数替换到computed中，这样当第一次加载页面时即会调用执行计算函数，并将返回值total以aa调用函数的形式展示，即保留了原有计算能力，又能够实时根据price或num的变化实时更新总价（利用了computed的值变化触发调用函数的属性）
        3.增加和减少的功能核心点在于如何获取当前点击的元素的索引index，方法是在循环遍历绑定事件调用函数的时候将index当成形参传递，然后遍历pro数组，匹配对象的元素的index和形参传递的index，一致则修改item.num即可
    -->
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                total: 0,
                sty: {
                    background: 'red',
                    width: '50px'
                },
                pro: [{
                    id: 1,
                    proName: 'nick',
                    price: 50,
                    chk: true,
                    num: 2
                },{
                    id: 2,
                    proName: 'anta',
                    price: 60,
                    chk: false,
                    num: 3
                },{
                    id: 3,
                    proName: 'adidas',
                    price: 70,
                    chk: false,
                    num: 4
                },{
                    id: 4,
                    proName: 'step',
                    price: 80,
                    chk: false,
                    num: 5
                },{
                    id: 5,
                    proName: '361',
                    price: 90,
                    chk: false,
                    num: 6
                }]
            },
            methods: {
                add(i) {
                   this.pro.forEach((item,index) => {
                       if(i == index){
                           item.num++;
                       }
                   }) 
                },
                reduce(i) {
                    this.pro.forEach((item,index) => {
                        if(i == index){
                            item.num--;
                            if(item.num < 0){
                                item.num = 0;
                           }
                       }
                   }) 
                }
            },
            computed: {
                aa() {
                    this.total = 0;
                    this.pro.forEach(item => {
                       if(item.chk) {
                           this.total = this.total + parseFloat(item.price) * parseFloat(item.num);
                       }
                   })
                   return this.total;
                }
            }
        });
    </script>
</body>
</html>